<template>
  <!-- 财务移库台帐 -->
  <div class="ccui-app-container">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <el-search
        ref="search"
        :formProp="filter"
        @search="search"
        :isShow="isShow"
        @resetForm="resetForm"
      >
        <!-- tab切换 -->
        <div class="ccui-tab-wrapper">
          <el-button type="table-top-active" size="mini"
            >全部（{{ page.total }}）</el-button
          >
        </div>
        <!-- 单行搜索 -->
        <template slot="search">
          <el-input
            v-model="filter.moveInventoryName"
            clearable
            searchLabel="移库单名称"
            placeholder="请输入移库单名称模糊查询"
            @blur="handleTrim('moveInventoryName')"
          ></el-input>
          <el-input
            v-model="filter.moveInventoryCode"
            clearable
            searchLabel="移库单编号"
            placeholder="请输入移库单编号模糊查询"
            @blur="handleTrim('moveInventoryCode')"
          ></el-input>
          <el-input
            v-model="filter.reportInOrgName"
            clearable
            searchLabel="填报单位"
            placeholder="请输入填报单位模糊查询"
            @blur="handleTrim('categoryName')"
          ></el-input>
          <el-input
            v-model="filter.originalWarehouseName"
            clearable
            searchLabel="原仓库"
            placeholder="请输入原仓库模糊查询"
          ></el-input>
          <el-input
            v-model="filter.targetWarehouseName"
            clearable
            searchLabel="目标仓库"
            placeholder="请输入目标仓库模糊查询"
          ></el-input>

          <!-- <el-select
            v-model="filter.billStatus"
            searchLabel="单据状态"
            placeholder="请选择单据状态查询"
          >
            <el-option label="待提交" value="2"> </el-option>
            <el-option label="审批中" value="3"> </el-option>
            <el-option label="审批中" value="4"> </el-option>
            <el-option label="审批通过" value="5"> </el-option>
            <el-option label="审批退回" value="6"> </el-option>
            <el-option label="冲销中" value="21"> </el-option>
            <el-option label="已冲销" value="22"> </el-option>
          </el-select> -->

          <el-date-picker
            searchLabel="编制日期"
            v-model="filter.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </template>
        <!-- 展开后多个搜索 -->
        <el-input
          v-model="filter.moveInventoryName"
          clearable
          slot="searchItem41"
          searchLabel="移库单名称"
          placeholder="请输入移库单名称模糊查询"
        ></el-input>
        <el-input
          v-model="filter.moveInventoryCode"
          clearable
          slot="searchItem4"
          searchLabel="移库单编号"
          placeholder="请输入移库单编号模糊查询"
          @blur="handleTrim('moveInventoryCode')"
        ></el-input>
        <el-input
          v-model="filter.reportInOrgName"
          clearable
          slot="searchItem92"
          searchLabel="填报单位"
          placeholder="请输入填报单位模糊查询"
          @blur="handleTrim('reportInOrgName')"
        ></el-input>
        <el-input
          v-model="filter.originalWarehouseName"
          clearable
          slot="searchItem1"
          searchLabel="原仓库"
          placeholder="请输入原仓库模糊查询"
        ></el-input>
        <el-input
          v-model="filter.targetWarehouseName"
          searchLabel="目标仓库"
          clearable
          slot="searchItem2"
          placeholder="请输入目标仓库模糊查询"
        ></el-input>

        <!-- <el-select
          slot="searchItem6"
          v-model="filter.billStatus"
          searchLabel="单据状态"
          placeholder="请选择单据状态查询"
        >
          <el-option label="待提交" value="2"> </el-option>
          <el-option label="审批中" value="3"> </el-option>
          <el-option label="审批中" value="4"> </el-option>
          <el-option label="审批通过" value="5"> </el-option>
          <el-option label="审批退回" value="6"> </el-option>
          <el-option label="冲销中" value="21"> </el-option>
          <el-option label="已冲销" value="22"> </el-option>
        </el-select> -->
        <el-date-picker
          slot="searchItem69"
          searchLabel="编制日期"
          v-model="filter.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>

        <div class="ccui-extend-btn">
          <el-export-button
            class="export-button"
            @export-excel="exportFile('single')"
            @export-pdf="exportFile('all')"
          ></el-export-button>
        </div>
      </el-search>
    </div>

    <!-- 表格 -->
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        @cell-click="view"
        :cell-style="cellStyle"
      >
        <template v-for="(table, index) in tableColumnData">
          <el-table-column
            :fixed="table.fixed || false"
            :type="table.type"
            :key="index"
            :label="table.label"
            :min-width="table.width"
            :prop="table.prop"
            :filters="table.filters"
            :show-overflow-tooltip="true"
            :align="table.align"
            :header-align="table.headerAlign || 'left'"
            :formatter="table.formatter"
          ></el-table-column>
        </template>
      </el-table>

      <!-- 分页 -->
      <div class="table-footer">
        <div class="ccui-table-footer">
          <div id="ccui-paging">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pageNo"
              popper-class="ccui-paging-page-size-popper"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getStoreList } from "../api";
import { getSessionItem, formatNumber } from "@/basa/utils";
import { detailExport } from "@/basa/api";
import { exportData } from "@/basa/utils/public";
export default {
  name: "move-store-account-list",
  data() {
    return {
      loading: false,
      isShow: false, // 搜索展开收起控制
      filter: {}, // 搜索集合
      searchValue: {},
      isFocus: 1, // 默认选中tab
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      tableColumnData: [
        {
          label: "序号",
          type: "index",
          fixed: true
        },
        {
          label: "移库单编号",
          prop: "moveInventoryCode",
          fixed: true,
          width: 200
        },
        {
          label: "移库单名称",
          prop: "moveInventoryName",
          width: 250
        },
        { label: "填报单位", prop: "reportInOrgName", width: 200 },
        { label: "原仓库", prop: "originalWarehouseName", width: 150 },
        { label: "目标仓库", prop: "targetWarehouseName", width: 200 },
        {
          label: "是否跨项目",
          prop: "isAcrossProject",
          width: 100,
          formatter: this.isAcrossProjectFormatter
        },
        {
          label: "移库数量",
          prop: "moveInventoryCount",
          width: 80,
          formatter: this.numFormatter
        },
        {
          label: "移库金额",
          prop: "moveInventoryMoney",
          width: 100,
          align: "right",
          formatter: this.price
        },
        {
          label: "编制人",
          prop: "reportUsername"
        },
        {
          label: "编制日期",
          prop: "reportTime",
          width: 100,
          formatter: this.formatterDate
        },
        {
          label: "单据状态",
          prop: "billStatus",
          formatter: this.statusFormatter,
          width: 120
        }
      ]
    };
  },
  activated() {
    this.search(this.filter);
  },
  deactivated() {
    this.$refs.search.resetForm();
  },

  created() {},

  methods: {
    // 获取列表数据
    getList() {
      this.loading = true;
      getStoreList({ ...this.page, ...this.searchValue }).then(res => {
        const { rows, recordsTotal } = res.data.data;
        this.tableData = rows;
        this.page.total = recordsTotal;
        this.loading = false;
      });
    },

    // 查看
    view(row, column) {
      if (column.label === "移库单编号") {
        this.$router.push({
          path: "/inventoryManagement/move-store-account/detail",
          query: { id: row.id }
        });
      }
    },

    // 移出数量
    numFormatter(data) {
      return formatNumber(data.moveInventoryCount, 3);
    },

    // 移出金额
    price(data) {
      return Number(data.moveInventoryMoney).toFixed(2);
    },
    // 导出
    async exportFile(type) {
      const obj = {
        ...this.searchValue,
        type: "moveinventory/accountExport",
        pageNo: type === "all" ? 1 : this.page.pageNo,
        pageSize: type === "all" ? 3000 : this.page.pageSize,
        contractState: this.searchValue,
        reportOrgId: getSessionItem("userInfo", "orgId")
      };

      exportData(await detailExport(obj));
    },

    // 颜色
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.label == "移库单编号") {
        return { color: "#0089EF", cursor: "pointer" };
      }
    },

    // 搜索回调
    search(searchVal) {
      if (searchVal.date) {
        searchVal.reportTimeStart = Date.parse(searchVal.date[0]);
        searchVal.reportTimeEnd = Date.parse(searchVal.date[1]);
        delete searchVal.date;
      }
      this.searchValue = JSON.parse(JSON.stringify(searchVal));
      this.page.pageNo = 1;
      this.getList();
    },
    // 重置回调
    resetForm() {
      this.filter = {};
    },

    //  展示条数
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getList();
    },
    // 当前页
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.getList();
    },
    // 清空名称空格
    handleTrim(key) {
      this.$set(
        this.filter,
        key,
        this.filter[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    },
    // 格式化时间
    formatterDate(data) {
      return data.reportTime.split(" ")[0];
    },
    // 是否跨项目格式化
    isAcrossProjectFormatter(data) {
      let str = { 0: "否", 1: "是" };
      return str[data.isAcrossProject] ? str[data.isAcrossProject] : "";
    },
    // 单据状态
    statusFormatter(row) {
      const { billStatus } = row;
      let str = null;
      switch (billStatus) {
        case "2":
          str = "待提交";
          break;
        case "3":
          str = "审批中";
          break;
        case "4":
          str = "已撤回";
          break;
        case "5":
          str = "审批通过";
          break;
        case "6":
          str = "审批退回";
          break;
        case "21":
          str = "冲销中";
          break;
        case "22":
          str = "已冲销";
          break;
      }
      return str;
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.ccui-multifunctional-table-wrapper {
  height: 100%;
}

/deep/ .ccui-app-container-detail-body {
  padding-bottom: 50px;
}
</style>
